<template>
  <div class="page">
    <div class="center-main">
      <div class="left">
        <div class="my-info">我的信息</div>
        <no-ssr>
          <div class="info" v-if="userInfo.school">
            <div class="item item-input">
              <span class="label stable">姓名</span>
              <div class="input">
                <b>{{userInfo.name}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">性别</span>
              <div class="input">
                <b>{{userInfo.gender | sexTransfer}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">地区</span>
              <div class="input">
                <b>{{userInfo.province.name}} {{userInfo.city.name}} {{userInfo.district.name}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">年级</span>
              <div class="input">
                <b>{{userInfo.startYear}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">学校</span>
              <div class="input">
                <b>{{userInfo.school.name}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">手机</span>
              <div class="input">
                <b>{{userInfo.phoneNumber}}</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable">身份</span>
              <div class="input">
                <b v-show="userInfo.code === 1">学生</b>
                <b v-show="userInfo.code === 0">家长</b>
                <b v-show="userInfo.code === 2">班主任</b>
              </div>
            </div>
            <div class="item item-input">
              <span class="label stable"></span>
              <div class="input">
                <span class="royal-deep" @click="infoPopupFlag=!infoPopupFlag">
                  修改
                </span>
              </div>
            </div>
          </div>
        </no-ssr>
      </div>
    </div>
    <transition name="fade">
      <div class="popup-info" v-show="infoPopupFlag">
        <div class="popup">
          <button class="button button-clear" @click="close">关闭</button>
          <form class="form-wrap" @submit.prevent="competeInfo('form2')" data-vv-scope="form2">
            <div class="row">
              <div class="col-4">
                <div class="item item-input item-stacked-label">
                  <span class="label">姓名</span>
                  <input type="text" placeholder="请输入姓名" name="realname" data-vv-as="姓名" v-model="competeParams.name" v-validate="'required|chinese'">
                  <span v-show="errors.has('form2.realname')" class="validate-help assertive">{{ errors.first('form2.realname') }}</span>
                </div>
              </div>
              <div class="col-3">
                <div class="item item-input item-stacked-label">
                  <span class="label">性别</span>
                  <div class="input">
                    <label class="radio">
                      <input type="radio" v-model="competeParams.gender" :value="true">男
                    </label>
                      <label class="radio">
                        <input type="radio" v-model="competeParams.gender" :value="false">女
                    </label>
                  </div>
                </div>
              </div>
              <div class="col-5">
                <div class="item item-input item-stacked-label">
                  <span class="label">身份</span>
                  <div class="input">
                    <label class="radio">
                      <input type="radio" v-model="competeParams.userIdentity" :value="1">学生
                    </label>
                    <label class="radio">
                      <input type="radio" v-model="competeParams.userIdentity" :value="0">家长
                    </label>
                    <label class="radio">
                      <input type="radio" v-model="competeParams.userIdentity" :value="2">班主任
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-4">
                <div class="item item-input item-stacked-label">
                  <span class="label">地点</span>
                  <select name="province" data-vv-as="省份" :disabled="!userInfo.isSuperUser" v-model="competeParams.provinceId" v-validate="'required'" @change="selectChange('province')">
                    <option value>请选择省份</option>
                    <option v-for="(item,index) in provincesData" :key="index" :value="item.id">{{item.name}}</option>
                  </select>
                  <span v-show="errors.has('form2.province')" class="validate-help assertive">{{ errors.first('form2.province') }}</span>
                </div>
              </div>
              <div class="col-4">
                <div class="item item-input item-stacked-label">
                  <span class="label">&nbsp;</span>
                  <select name="city" data-vv-as="城市" v-model="competeParams.cityId" v-validate="'required'" @change="selectChange('city')">
                    <option value>请选择城市</option>
                    <option v-for="(item,index) in cityData" :key="index" :value="item.id">{{item.name}}</option>
                  </select>
                  <span v-show="errors.has('form2.city')" class="validate-help assertive">{{ errors.first('form2.city') }}</span>
                </div>
              </div>
              <div class="col-4">
                <div class="item item-input item-stacked-label">
                  <span class="label">&nbsp;</span>
                  <select name="area" data-vv-as="地区" v-model="competeParams.districtId" v-validate="'required'" @change="selectChange('district')">
                    <option value>请选择地区</option>
                    <option v-for="(item,index) in districtData" :key="index" :value="item.id">{{item.name}}</option>
                  </select>
                  <span v-show="errors.has('form2.area')" class="validate-help assertive">{{ errors.first('form2.area') }}</span>
                </div>
              </div>
            </div>
            <div class="item item-input item-stacked-label">
              <span class="label">学校</span>
              <select name="school" data-vv-as="学院" v-model="competeParams.school" v-validate="'required'">
                <option value>请选择学校</option>
                <option v-for="(item,index) in schoolData" :key="index" :value="item.id">{{item.name}}</option>
              </select>
              <span v-show="errors.has('form2.school')" class="validate-help assertive">{{ errors.first('form2.school') }}</span>
            </div>
            <div class="item item-input item-stacked-label">
              <span class="label">年级</span>
              <select name="entry" data-vv-as="年级" v-model="competeParams.startYear" v-validate="'required'">
                <option value>请选择年级</option>
                <option v-for="(item,index) in yearData" :key="index" :value="item">{{item}}</option>
              </select>
              <span v-show="errors.has('form2.entry')" class="validate-help assertive">{{ errors.first('form2.entry') }}</span>
            </div>
            <div class="padding">
              <button class="button button-dark button-block">确定</button>
            </div>
          </form>
        </div>
        <div class="mask" @click="infoPopupFlag=false"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import { api } from '@/utils'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  // layout: 'user-center',
  layout: 'zhiyuan-select',
  data () {
    return {
      infoPopupFlag: false,
      bindPopupFlag: false,
      totalElements: 0,
      currentIndex: 0,
      tabsData: [],
      listData: [],
      provincesData: [],
      cityData: [],
      districtData: [],
      schoolData: [],
      yearData: ['高一', '高二', '高三'],
      bindParams: {
      },
      competeParams: {
      },
      page: 1,
      params: {
        type: 1,
        page: 0,
        size: 10,
        sort: 'desc'
      },
      count: []
    }
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      authInfo: 'authInfo'
    }),
    canOpenVip () {
      console.log('userInfo---', this.userInfo)
      const { level, isValid } = this.userInfo
      if (!isValid || !level || level === 'EXPERIENCE') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapMutations(['SET_AUTH_INFO']),
    ...mapActions(['getUserInfo']),
    bindTitile (index) {
      let _path = ['/user-center', '/user-center/follow', '/user-center/center']
      this.$router.push({
        path: _path[index]
      })
    },
    setFavorite (item) {
      this.$axios.get(api.zhiyuanSetFavorite, {
        params: {
          type: this.currentIndex + 1,
          id: item.id
        }
      }).then(data => {
        this.$set(item, 'cancel', !item.cancel)
      })
    },
    filterCityDistrict (arr, id) {
      for (let key in arr) {
        let item = arr[key]
        if (item.id === id) return item
      }
    },
    initData () {
      Promise.all([
        this.$axios.get(api.area),
        this.$axios.get(api.findScholl, {
          params: {
            districtId: this.userInfo.district.id
          }
        })
      ]).then(data => {
        this.provincesData = data[0]
        this.cityData = this.filterCityDistrict(this.provincesData, this.userInfo.province.id).cities
        this.districtData = this.filterCityDistrict(this.cityData, this.userInfo.city.id).districts

        this.schoolData = data[1]._embedded.schools
        this.competeParams = {
          name: this.userInfo.name,
          gender: this.userInfo.gender,
          provinceId: this.userInfo.province.id,
          cityId: this.userInfo.city.id,
          districtId: this.userInfo.district.id,
          school: this.userInfo.school.id,
          startYear: this.userInfo.startYear,
          userIdentity: this.userInfo.code
        }
      })
    },
    pagechange (index) {
      this.params.page = index - 1
      this.page = index
      this.getData(this.params)
    },
    getData (params) {
      this.$axios.get(api.favoriteGetAll, {
        params: params
      }).then(data => {
        this.listData = data.list.content
        this.totalElements = data.list.totalElements
        this.count = []
        this.count = [data.collegeNum, data.majorNum, data.careerNum]
        if (this.params.page === 0) {
          this.tabsData = [`关注的大学(${data.collegeNum})`, `关注的专业(${data.majorNum})`, `关注的职业(${data.careerNum})`]
        }
      })
    },
    selectChange (type) {
      if (type === 'province') {
        this.cityData = []
        this.districtData = []
        this.schoolData = []
        this.competeParams.cityId = ''
        this.competeParams.districtId = ''
        this.competeParams.school = ''
        // this.competeParams.provinceId && this.$axios.get(`${api.cities}/${this.competeParams.provinceId}/cities`).then(data => {
        //   console.log(333, data)
        //   this.cityData = data._embedded.cities
        // })
        this.competeParams.provinceId && (this.cityData = this.filterCityDistrict(this.provincesData, this.competeParams.provinceId).cities)
      } else if (type === 'city') {
        this.districtData = []
        this.schoolData = []
        this.competeParams.districtId = ''
        this.competeParams.school = ''
        this.competeParams.cityId && (this.districtData = this.filterCityDistrict(this.cityData, this.competeParams.cityId).districts)
      } else if (type === 'district') {
        this.schoolData = []
        this.competeParams.school = ''
        this.competeParams.districtId && this.$axios.get(api.findScholl, {
          params: {
            districtId: this.competeParams.districtId
          }
        }).then(data => {
          this.schoolData = data._embedded.schools
        })
      }
    },
    competeInfo (scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          let { school, gender, provinceId, cityId, districtId, startYear, name, userIdentity } = this.competeParams
          let params = {
            ...this.userInfo,
            gender: gender,
            name,
            startYear,
            id: this.userInfo.id,
            school: {
              id: school
            },
            // address: {
            province: {
              id: provinceId
            },
            city: {
              id: cityId
            },
            district: {
              id: districtId
            },
            userIdentity
            // }
          }
          console.debug(userIdentity)
          this.$axios.post(api.updateUserInfo, params).then(data => {
            this.$toasted.success('修改信息成功')
            this.infoPopupFlag = false
            this.getUserInfo(this)
          }).catch(() => {
            this.$toasted.error('接口调用失败')
          })
        }
      })
    },
    tabClick (index) {
      this.currentIndex = index
      this.params.type = index + 1
      this.params.page = 0
      this.page = this.params.page + 1
      if (this.count[index] > 0) {
        this.getData(this.params)
      } else {
        this.listData = []
      }
    },
    bindCard (scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          let authInfo = this.authInfo
          this.$axios.post(api.bindingCard, {
            ...this.bindParams,
            phoneNumber: authInfo.phoneNum
          }).then(data => {
            let authInfo = this.lodash.cloneDeep(this.authInfo)
            authInfo.isValid = true
            authInfo.level = data.level
            this.SET_AUTH_INFO(authInfo)
            this.getUserInfo(this)
            this.bindPopupFlag = false
          }).catch(err => {
            this.$toasted.error(err.data.message)
          })
        }
      })
    },
    close () {
      this.infoPopupFlag = !this.infoPopupFlag
      this.initData()
      console.log(this.competeParams)
    }
  },
  mounted () {
    /* for (let i = 0; i < 4; i++) {
      this.yearData[i] = formatDate(new Date(), 'yyyy') - i
    } */
    this.initData()
    this.getData(this.params)
  }
}
</script>

<style scoped lang="scss">
.item-input .label{
  width:100px;
}
.royal-deep{
  margin-top:30px !important;
  display:block;
  background:$table-b;
  color:#FFF !important;
  cursor:pointer;
  height:40px; line-height:40px;
  width:100px; text-align:center;
  border-radius:10px;
}
.popup-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  .popup {
    width: 600px;
    padding: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: $light;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 6px;
    // overflow: hidden;
    z-index: 101;
    .button-clear {
      position: absolute;
      right: 0;
      top: 10px;
    }
    .padding {
      padding-top: 30px;
    }
    .row .col-6 {
      &:not(:last-child) {
        padding-right: 10px;
      }
    }
    .row .col-4 {
      &:not(:last-child) {
        padding-right: 10px;
      }
    }
  }
  div.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($dark, 0.3);
  }
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.center-main {
  display: flex;
  justify-content: space-between;
  flex: 1;
  background:$light;
  border-radius:10px;
  min-height:450px;
  // overflow: hidden;
  .left {
    width:100%;
    background: $light;
    border-radius:10px;
    padding: 10px 30px;
    .my-info{
      font-size:24px;
      color:#444444;
      border-bottom:1px solid $line;
      text-align:center;
      padding:10px 0 20px;
    }
    .info {
      padding-top: 20px;
      .item {
        padding: 0;
      }
    }
  }
  .tabs-wrap {
    flex: 1;
    overflow: auto;
    .box {
      .item {
        padding-left: 12px;
      }
    }
  }
}
</style>
